<template>
  <div class="order-refund-list-item">
    <div class="order-refund-list-item-l1 van-hairline--bottom">
      <div class="order-list-item-store">
        <van-icon name="shop-o" :size="20"/>
        <span class="order-list-item-store-name">{{ storeName }}</span>
      </div>
      <div class="order-refund-list-item-status">{{ statusLabel }}</div>
    </div>
    <white-space/>
    <order-refund-item :key="dispute.id" :item="dispute" @click="handleRouteToRefund"/>
    <white-space/>
    <div class="order-refund-list-item-amounts">
      <div class="total-amount">
        <span class="amount-label">退款金额</span>
        <price :value="dispute.amount" :size="16"/>
      </div>
    </div>
    <white-space/>
    <div class="van-hairline--top order-refund-list-item-actions">
      <order-dispute-actions :refund="dispute" @cancel="$emit('cancel')"/>
    </div>
  </div>
</template>

<script>
import { order } from "@mall/api-services"
import { Button, Icon } from "vant"
import OrderRefundItem from "@/components/order/OrderRefundItem"
import WhiteSpace from "@/components/WhiteSpace"
import Price from "@/components/Price"
import OrderActions from "@/components/order/OrderActions"
import OrderDisputeActions from "@/components/order/OrderDisputeActions"

const { OrderDisputeStatus } = order

export default {
  name: "OrderDisputeListItem",
  components: {
    OrderDisputeActions,
    OrderActions,
    WhiteSpace,
    OrderRefundItem,
    Price,
    [Button.name]: Button,
    [Icon.name]: Icon,
  },
  props: {
    dispute: Object,
  },
  computed: {
    storeId() {
      return this.dispute.storeId
    },
    storeName() {
      return this.dispute.storeName
    },
    statusLabel() {
      const { status } = this.dispute
      if (OrderDisputeStatus.Applying === status || OrderDisputeStatus.Reapplying === status) {
        return "等待商家确认"
      } else if (OrderDisputeStatus.Disapproved === status) {
        return "退款未批准"
      } else if (OrderDisputeStatus.Pending === status) {
        return "退款处理中"
      } else if (OrderDisputeStatus.Succeeded === status) {
        return "退款成功"
      } else if (OrderDisputeStatus.Failed === status) {
        return "退款失败"
      }
      return "未知"
    },
  },
  methods: {
    handleRouteToRefund() {
      const { dispute } = this
      this.$router.push(`/orders/${dispute.orderId}/refunds/${dispute.id}`)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-refund-list-item {
  background: #fff;
  margin-bottom: 9px;

  .order-refund-list-item-l1 {
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1rem;

    .order-list-item-store {
      display: inline-flex;
      align-items: center;

      .order-list-item-store-name {
        margin-left: 4px;
        font-weight: 700;
        line-height: 1rem;
      }
    }

    .order-refund-list-item-status {
      font-size: 13px;
      color: $danger-color;
    }
  }

  .order-refund-list-item-amounts {
    display: flex;
    justify-content: flex-end;
    padding: 0 9px;

    .amount-label {
      margin-right: 4px;
      font-size: 14px;
    }

    .total-amount {
      display: inline-flex;
      align-items: flex-end;
    }
  }

  .order-refund-list-item-actions {
    padding: 9px;
    display: flex;
    justify-content: flex-end;

    .van-button {
      margin-left: 9px;
      width: 72px;
    }
  }
}
</style>
